<template>
  <a-layout class="home-container">
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
      <div class="logo" @click="moveToLessInternet">
          <img :style="{height:collapsed?'80%':'100%'}" src="http://s.nodejs.cn/less/img/logo.png" alt="">    
      </div>
      <a-menu
        mode="inline"
        theme="dark"
        :defaultSelectedKeys="[$route.path]"
        :openKeys="openKeys"
        @click="menuClick"
        @openChange="onOpenChange">
        <a-sub-menu :key="item.path" v-for="item in menulist">
            <span slot="title"><a-icon type="codepen" /><span>{{item.name}}</span></span>
            <a-menu-item :key="item2.path" v-for="item2 in item.children" > {{item2.name}} </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header>
          <a-icon
            class="trigger"
            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
            @click="() => (collapsed = !collapsed)"/>
          <div>
            <a-tooltip placement="bottom">
              <template slot="title">
                <span>点击进入个人博客</span>
              </template>
              <a href="http://www.zhuchuli.cn:4000">
                <a-avatar :size="'large'" :src="avatarSrc" icon="user" />
              </a>
            </a-tooltip>
            <span class="nickname">Possible</span>
          </div>
      </a-layout-header>
      <a-layout-content>
        <router-view></router-view>
      </a-layout-content>
      <a-layout-footer>
        <a-tooltip placement="bottom">
          <template slot="title">
            <span>Gitee</span>
          </template>
          <a href="https://gitee.com/chu_li_zhu">
            <i class="iconfont icon-gitee-fill-round"></i>
          </a>
        </a-tooltip>
        <span>粤ICP备2020113579号</span>
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<script>

export default {
    data(){
        return {
           top:0,
            //控制导航栏的显示与隐藏
            collapsed:false,
            //头像图标
            avatarSrc:"https://free.img.jpg.ink/imgs/2020/11/21/c59141c275a4e.jpeg",
            //一级菜单与二级菜单
            menulist:[
                {
                  "id":1,
                  "name":"Less",
                  "path":"/lessInfo",
                  "icon":"iconfont icon-less",
                  "children":[
                    {
                      "id":2,
                      "name":"初见Less",
                      "path":"/less"
                    },
                    {
                      "id":3,
                      "name":"变量Variable",
                      "path":"/variable"
                    },
                    {
                      "id":4,
                      "name":"混合mixins",
                      "path":"/mixins"
                    },{
                      "id":5,
                      "name":"嵌套规则",
                      "path":"/nestedRules"
                    },{
                      "id":6,
                      "name":"运算",
                      "path":"/operations"
                    },{
                      "id":7,
                      "name":"命名空间",
                      "path":"/namespace"
                    },{
                      "id":8,
                      "name":"引入",
                      "path":"/important"
                    }
                  ]
                },
                {
                  "id":4,
                  "name":"Scss",
                  "path":"/scssInfo",
                  "icon":"iconfont icon-scss",
                  "children":[
                    {
                      "id":2,
                      "name":"初见Scss",
                      "path":"/scss"

                    },
                    {
                      "id":3,
                      "name":"变量Variable",
                      "path":"/variable2"
                    }
                  ]
                }
            ],
            //选中的子菜单项
            defaultSelectedKeys:[],
            //展开的父菜单项
            openKeys:[],
            // 全部顶级父节点,用来控制所有父级菜单只展开其中的一项，可用遍历菜单信息进行赋值
            rootSubmenuKeys: ['/lessInfo','/scssInfo']

        
        }
    },
    async created(){
      //提取数据

      //从缓存中取出openKeys
      const openKeys = window.sessionStorage.getItem('openKeys')
      if(openKeys){
        this.openKeys = JSON.parse(openKeys)
      }
    },
    methods:{
      // 点击菜单，路由跳转,注意的是当点击MenuItem才会触发此函数
      menuClick({ item, key, keyPath }){
        this.$router.push({
          path:key
        })
      },
      onOpenChange(openKeys){
        //console.log(openKeys);
        //console.log(this.openKeys.length);
        //将当前打开的父级菜单存入到缓存中
        // window.sessionStorage.clear()
        window.sessionStorage.setItem('openKeys',JSON.stringify(openKeys))
        //控制只打开一项
        const lastesOpenKeys = openKeys.find(item => 
          this.openKeys.indexOf(item) === -1
        )
        console.log(lastesOpenKeys);
        if(this.rootSubmenuKeys.indexOf(lastesOpenKeys) === -1){
          this.openKeys = openKeys
        }else{
          this.openKeys = lastesOpenKeys ? [lastesOpenKeys] : []
        }
      },
      moveToLessInternet(){
        console.log("1");
        window.location.href="http://lesscss.cn/"
      }
    }
};
</script>

<style lang="less" scoped>
.home-container {
  height: 100%;
}
.ant-layout-sider {
  background-color: #333744;
  padding-top:6px;
  .logo {
    height: 58px;
    display: flex;
    justify-content: center;
    align-items:center;
    > img{
      width: 85%;
    }
  }
}
.ant-layout-header {
  display: flex;
  justify-content:space-between;
  background-color: #373d41;
  padding-left: 3px;
  height: 65px;
  .trigger{
    color:#fff;
    // color:#333744;
    font-size: 26px;
    line-height: 65px;
    cursor: pointer;
    transition: color 0.3s;
    margin-left:3px;
  }
  .trigger:hover{
    color: #1890ff;
  }
  .nickname{
    color:#fff;
    font-size: 12px;
    margin-left:6px;
  }
}
.ant-layout-content{
  background-color: #eaedf1;
  margin-top:10px;
}
.ant-layout-footer {
  color: #333333;
  text-align: center;
  line-height: 2px;
  >a{
    color:#000;
    font-size: 20px;
    padding:2px 6px 0 0;
  }
}
</style>